<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>06-personInfoList</title>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/css/containerDetailWrapping.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/material-teal/easyui.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/color.css">
</head>
<body>
  <div class="container containerDetail-wrapping">
    <br>
    <form method="post" action="#">
      <input type="text" class="form-control" id="forRid" value="${root.rid }" name="rid" style="display:none;">
      <div class="form-group row">
        <label for="forUsername" class="col-sm-3 col-form-label text-center">用户名</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" id="forUsername" value="${root.username }" name="username" readonly>
        </div>
      </div>
      <div class="form-group row">
        <label for="forPassword" class="col-sm-3 col-form-label text-center">密码</label>
        <div class="col-sm-6">
          <input type="text" class="form-control handleEdit" id="forPassword" value="${root.password }" name="password" readonly>
        </div>
      </div>
      <div class="form-group row">
        <label for="forRealname" class="col-sm-3 col-form-label text-center">真实姓名</label>
        <div class="col-sm-6">
          <input type="text" class="form-control handleEdit" id="forRealname" value="${root.realname }" name="realname" readonly>
        </div>
      </div>
      <div class="form-group row">
        <label for="forCellphone" class="col-sm-3 col-form-label text-center">联系电话</label>
        <div class="col-sm-6">
          <input type="text" class="form-control handleEdit" id="forCellphone" value="${root.cellphone }" name="cellphone" readonly>
        </div>
      </div>
      <div class="form-group row">
        <label for="forEmail" class="col-sm-3 col-form-label text-center">邮箱</label>
        <div class="col-sm-6">
          <input type="email" class="form-control handleEdit" id="forEmail" value="${root.email }" name="email" readonly>
        </div>
      </div>
      <!-- c:if来进行radio选定 -->
      <div class="form-group row">
        <label class="col-sm-3 col-form-label text-center">性别</label>
        <div class="col-sm-9">
          <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" id="forMan" name="gender" class="custom-control-input" <c:if test="${root.gender==0}">checked='checked'</c:if> value="0" disabled>
            <label class="custom-control-label" for="forMan">男</label>
          </div>
          <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" id="forWoman" name="gender" class="custom-control-input" <c:if test="${root.gender==1}">checked='checked'</c:if> value="1" disabled>
            <label class="custom-control-label" for="forWoman">女</label>
          </div>
        </div>
      </div>
      <div class="form-group row">
        <label for="" class="col-sm-3 col-form-label text-center">个人简介<em>（100字内）</em></label>
        <div class="col-sm-6">
          <textarea id="forResume" class="form-control handleEdit" rows="4" name="resume" readonly>${root.resume }</textarea>
        </div>
      </div>
      <br>
      <div class="form-group row">
        <label class="col-sm-3"></label>
        <div class="col-sm-6 text-center ButtonList">
          <button type="button" class="btn col-sm-3 btn-outline-primary mr-lg-5 editButton">编辑</button>
          <button type="button" class="btn col-sm-3 btn-outline-primary saveButton">保存</button>
        </div>
      </div>
    </form>
  </div>

  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/locale/easyui-lang-zh_CN.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/js/personalInfo.js"></script>
  <script>
    // 这是保存在 session 中的root对象，分离后的.js文件无法读取
    // 只要修改个人信息，会同步更新session中的root对象
    const root = {
    		'rid':'${root.rid}',
    		'username':'${root.username}',
    		'password':'${root.password}',
    		'realname':'${root.realname}',
    		'gender':'${root.gender}',
    		'cellphone':'${root.cellphone}',
    		'email':'${root.email}',
    		'resume':'${root.resume}'
    };
    $(function(){
    	  // 点击保存
    	  // data数据为输入框中新输入的内容
    	  $(".ButtonList").on("click",".saveChange",function() {
    	    $.ajax({
    	      "url" : "/LostAndFound/personal?method=handleUpdatePersonalInfo",
    	      "type" : "POST",
    	      "data" : {
    	        'rid' : $("#forRid").val(),
    	        'username' : $("#forUsername").val(),
    	        'password' : $("#forPassword").val(),
    	        'realname' : $("#forRealname").val(),
    	        'gender' : $("input[name='gender']:checked").val(),
    	        'cellphone' : $("#forCellphone").val(),
    	        'email' : $("#forEmail").val(),
    	        'resume' : $("#forResume").val()
    	      },
    	      "success" : function(data) {
     	        $.messager.show({
    	          title:"Success",
    	          msg:"修改成功！"
    	        });
    	        removeEditFunction();
    	      },
    	      "error": function(){
     	        $.messager.show({
    	          title:"Error",
    	          msg:"修改错误！"
    	        }); 
    	        removeEditFunction();
    	      },
    	      "dataType" : "json"
    	    });
    	  });
    });// end of $(function(){})
  </script>
</body>
</html>